<template>
  <!-- 热门城市岗位图 -->
  <div class="barChart"></div>
</template>

<script>
import { getHotCityJob } from "@/api/page2Api";
export default {
  name: "",
  data() {
    return {
      data: [],
      cityData: [],
      job1: [],
      job2: [],
      job3: [],
      job4: [],
      job5: [],
      jobData: [],
      locationData: ["金华", "台州", "嘉兴", "杭州"],
    };
  },
  props: {
    hData: Array,
  },
  watch: {
    hData(newValue) {
      // console.log(newValue, "11");
      this.setChart()
      // this.liveheader = newValue
    },
  },
  methods: {
    getData() {
      getHotCityJob().then((res1) => {
        let res = res1.data;
        if (res.length > 0) {
          this.jobData = [];
          this.job1 = [];
          this.job2 = [];
          this.job3 = [];
          this.job4 = [];
          this.job5 = [];
          res.forEach((item, index) => {
            if (item.length > 4 && this.jobData.length < 4) {
              this.jobData.push(item[0].job_name);
              item.forEach((it) => {
                // if(it.location=='上海') {
                //   this.job1.push(it.salary);
                // }
                if (it.location == "金华") {
                  this.job2.push(it.salary);
                }
                if (it.location == "台州") {
                  this.job3.push(it.salary);
                }
                if (it.location == "嘉兴") {
                  this.job4.push(it.salary);
                }
                if (it.location == "杭州") {
                  this.job5.push(it.salary);
                }
              });
            }
          });
          this.setChart();
        }
      });
    },
    setChart() {
      let option = {
        title: {
          text: "全国不同行业在招岗位分布情况",
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.hData,
            top: 130,
            // bottom: 0,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    // this.getData();
  },
};
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>